import { View, Picker } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useEffect,useState } from "react";
import { AtIcon } from 'taro-ui'
import { getAllCompanyArea,getAllCompanyType,getSpecificCompany } from "../../api/mode";
import {CompanyCard} from '../index'
import './index.scss'

export default function CompanyChoose(props){
  const openid=Taro.getStorageSync(`openid`)

  const [areaSelector,setAreaSelector]= useState(['地区不限'])
  const [positionTypeSelector,setCompanyTypeSelector]= useState(['无要求'])

  const [areaselectorCheck,setAreaSelectorCheck]=useState('')
  const [positionselectorCheck,setCompanySelectorCheck]=useState('')

  const [specificCompanyList,setSpecificCompanyList]=useState()


    //分页
    const [companyNum,setCompantNum]=useState(1)
    const [companyFlag,setCompanyFlag]=useState(false)

  useEffect(()=>{
    //初始获得公司种类和地区的下拉列表
    getAllCompanyArea().then(res=>{setAreaSelector(res.data.data)})
    getAllCompanyType().then(res=>{setCompanyTypeSelector(res.data.data)})
  },[])

  useEffect(()=>{
    setCompantNum(props.pageNum)
  },[props.pageNum])


  //选择器
  useEffect(()=>{
    const specificCompany={//设置请求参数
      area:areaselectorCheck,
      type:positionselectorCheck,
      openid:openid,
      page:companyNum,
      size:5,
    }

    //修改筛选条件后将num置1
    props.changeCompanyNum()

    getSpecificCompany(specificCompany).then(//获取特定的公司
      res=>{
        res.data.data?setSpecificCompanyList(res.data.data.records):setSpecificCompanyList([])
        if(!res.data.data){
          Taro.showToast({
            title:"暂无目标公司",
              icon:'error',
              duration:1500,
          })
        }
      }
    )

  },[areaselectorCheck,positionselectorCheck])

  //分页
  useEffect(()=>{
    const specificCompany={//设置请求参数
      area:areaselectorCheck,
      type:positionselectorCheck,
      openid:openid,
      page:companyNum,
      size:5,
    }

    if(companyNum>1&&!companyFlag){
      getSpecificCompany(specificCompany).then(//获取特定的公司
      res=>{
        if(!res.data.data.records.length){
          setCompanyFlag(true)
          Taro.showToast({
            title:'没有更多公司了',
            icon:'error',
            duration:2000
          })
        }
        setSpecificCompanyList([
          ...specificCompanyList,
          ...res.data.data.records,
        ])

      }
    )
    }

  },[companyNum])

  return (
    <View className='positionChoose'>

      <View className='at-row companyPickerBack '>

        <View className='at-col  positionPicker positionChooseCard'>
        <Picker mode='selector' range={positionTypeSelector} onChange={(e)=>{console.log(e);setCompanySelectorCheck(positionTypeSelector[e.detail.value])}}>
                <View className='picker'>
                <View className='makePosition'>
                  {positionselectorCheck?positionselectorCheck:'企业类别'}
                  <AtIcon value='chevron-down' size='20' color='#00F' className='company_chevron'></AtIcon>
                </View>
                </View>
          </Picker>
        </View>
        

        <View className='at-col  positionPicker positionChooseCard'>
        <Picker mode='selector' range={areaSelector} onChange={(e)=>{console.log(e);setAreaSelectorCheck(areaSelector[e.detail.value])}}>
                <View className='picker'>
                <View className='makePosition'>
                  {areaselectorCheck?areaselectorCheck:'地区选择'}
                  <AtIcon value='chevron-down' size='20' color='#00F' className='company_chevron'></AtIcon>
                </View>
                </View>
          </Picker>
        </View>

    

      </View>


      <View>
          {specificCompanyList
          ?
          specificCompanyList.map((Info,index)=>(<CompanyCard key={index}  Info={Info} isCollected={Info.collected}></CompanyCard>))
          :
          null}
        </View>
    </View>
  )
}